{% extends "member/layout.html" %}

{% block title %}编辑个人信息{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-12">
        <div class="card dashboard-card border-0">
            <div class="card-header bg-transparent border-0 pb-0">
                <div class="d-flex justify-content-between align-items-center">
                    <h4 class="mb-0 text-primary fw-bold">
                        <i class="fas fa-user-edit me-2"></i>编辑个人信息
                    </h4>
                    <a href="{{ url_for('member.userinfo.view_profile') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-arrow-left me-1"></i> 返回
                    </a>
                </div>
            </div>
            <div class="card-body pt-4">
                <form method="POST" action="{{ url_for('member.userinfo.edit_profile') }}">
                    <div class="row">
                        <!-- 左侧头像和操作区域 -->
                        <div class="col-lg-4 col-md-5 text-center mb-4 mb-md-0">
                            <div class="avatar-section mb-4">
                                <div class="position-relative d-inline-block">
                                    <div class="avatar-container mb-3">
                                        <img src="{{ url_for('static', filename='nopic.jpg') }}"
                                             class="rounded-circle img-thumbnail shadow"
                                             style="width: 180px; height: 180px; object-fit: cover;"
                                             alt="用户头像">
                                        <div class="avatar-overlay">
                                            <button type="button" class="btn btn-light btn-sm">
                                                <i class="fas fa-camera"></i> 更换头像
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="user-meta">
                                    <h5 class="fw-bold text-dark mb-1">{{ member.name }}</h5>
                                    <p class="text-muted mb-2">{{ member.position or '未设置职位' }}</p>
                                </div>
                            </div>

                            <div class="action-buttons">
                                <button type="submit" class="btn btn-primary w-100 mb-3 py-2">
                                    <i class="fas fa-save me-2"></i>保存更改
                                </button>
                                <a href="{{ url_for('member.userinfo.view_profile') }}"
                                   class="btn btn-outline-secondary w-100 py-2">
                                    <i class="fas fa-times me-2"></i>取消
                                </a>
                            </div>

                            <div class="registration-info mt-4 p-3 bg-light rounded">
                                <p class="small text-muted mb-1">
                                    <i class="fas fa-calendar-alt me-1"></i> 注册时间
                                </p>
                                <p class="mb-0 fw-medium">{{ member.create_time.strftime('%Y-%m-%d') }}</p>
                            </div>
                        </div>

                        <!-- 右侧编辑区域 -->
                        <div class="col-lg-8 col-md-7">
                            <!-- 基本信息 -->
                            <div class="info-section mb-4">
                                <div class="section-header mb-3">
                                    <h5 class="text-primary fw-bold mb-0">
                                        <i class="fas fa-id-card me-2"></i>基本信息
                                    </h5>
                                    <div class="divider"></div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label class="form-label fw-medium">
                                                <i class="fas fa-user me-1 text-muted"></i>用户名
                                            </label>
                                            <input type="text" class="form-control form-control-lg bg-light"
                                                   value="{{ member.name }}" readonly>
                                            <div class="form-text">用户名不可修改</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label class="form-label fw-medium">
                                                <i class="fas fa-briefcase me-1 text-muted"></i>职位
                                            </label>
                                            <input type="text" class="form-control form-control-lg bg-light"
                                                   value="{{ member.position or '未设置' }}" readonly>
                                            <div class="form-text">请联系管理员修改职位</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 联系方式 -->
                            <div class="info-section mb-4">
                                <div class="section-header mb-3">
                                    <h5 class="text-primary fw-bold mb-0">
                                        <i class="fas fa-address-book me-2"></i>联系方式
                                    </h5>
                                    <div class="divider"></div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label class="form-label fw-medium">
                                                <i class="fas fa-mobile-alt me-1 text-muted"></i>手机号
                                            </label>
                                            <input type="text" class="form-control form-control-lg"
                                                   name="mobile" value="{{ member.mobile or '' }}"
                                                   placeholder="请输入手机号码" required>
                                            <div class="form-text">请输入有效的手机号码</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label class="form-label fw-medium">
                                                <i class="fas fa-envelope me-1 text-muted"></i>邮箱
                                            </label>
                                            <input type="email" class="form-control form-control-lg"
                                                   name="email" value="{{ member.email or '' }}"
                                                   placeholder="请输入邮箱地址" required>
                                            <div class="form-text">请输入有效的邮箱地址</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 组织信息 -->
                            <div class="info-section mb-4">
                                <div class="section-header mb-3">
                                    <h5 class="text-primary fw-bold mb-0">
                                        <i class="fas fa-building me-2"></i>组织信息
                                    </h5>
                                    <div class="divider"></div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label class="form-label fw-medium">
                                                <i class="fas fa-users me-1 text-muted"></i>部门
                                            </label>
                                            <input type="text" class="form-control form-control-lg bg-light"
                                                   value="{{ member.department.name if member.department else '未设置' }}" readonly>
                                            <div class="form-text">请联系管理员调整部门</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label class="form-label fw-medium">
                                                <i class="fab fa-weixin me-1 text-muted"></i>企业微信ID
                                            </label>
                                            <input type="text" class="form-control form-control-lg bg-light"
                                                   value="{{ member.wecom_userid or '未绑定' }}" readonly>
                                            <div class="form-text">企业微信ID由系统自动绑定</div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 密码修改 -->
                            <div class="info-section">
                                <div class="section-header mb-3">
                                    <h5 class="text-primary fw-bold mb-0">
                                        <i class="fas fa-key me-2"></i>密码修改
                                    </h5>
                                    <div class="divider"></div>
                                </div>
                                <div class="alert alert-info d-flex align-items-center mb-4">
                                    <i class="fas fa-info-circle me-2 fs-5"></i>
                                    <div>仅在需要修改密码时填写以下字段</div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label class="form-label fw-medium">
                                                <i class="fas fa-lock me-1 text-muted"></i>新密码
                                            </label>
                                            <input type="password" class="form-control form-control-lg"
                                                   name="new_password" placeholder="留空则不修改密码">
                                            <div class="form-text">密码长度至少8位</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label class="form-label fw-medium">
                                                <i class="fas fa-lock me-1 text-muted"></i>确认新密码
                                            </label>
                                            <input type="password" class="form-control form-control-lg"
                                                   name="confirm_password" placeholder="再次输入新密码">
                                            <div class="form-text">请再次输入新密码</div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-group">
                                            <label class="form-label fw-medium">
                                                <i class="fas fa-key me-1 text-muted"></i>当前密码
                                            </label>
                                            <input type="password" class="form-control form-control-lg"
                                                   name="current_password" placeholder="修改密码需输入当前密码" required>
                                            <div class="form-text">修改密码需验证当前密码</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
.avatar-container {
    position: relative;
    display: inline-block;
}

.avatar-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .5s ease;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-container:hover .avatar-overlay {
    height: 100%;
}

.section-header {
    position: relative;
}

.divider {
    height: 3px;
    width: 50px;
    background: linear-gradient(to right, var(--primary-color), transparent);
    margin-top: 8px;
    border-radius: 3px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-control-lg {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 0.75rem 1rem;
    transition: all 0.2s;
}

.form-control-lg:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.15);
}

.form-control-lg.bg-light {
    background-color: #f8fafc !important;
    color: #718096;
}

.form-label {
    color: #4a5568;
    margin-bottom: 0.5rem;
    display: block;
}

.form-text {
    font-size: 0.8rem;
    color: #718096;
    margin-top: 0.25rem;
}

.action-buttons .btn {
    border-radius: 8px;
    font-weight: 500;
}

.registration-info {
    background-color: #f7fafc !important;
    border-left: 3px solid var(--primary-color);
}

.alert-info {
    background-color: #ebf8ff;
    border-color: #bee3f8;
    color: #2c5282;
    border-radius: 8px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 密码匹配验证
    const newPassword = document.querySelector('input[name="new_password"]');
    const confirmPassword = document.querySelector('input[name="confirm_password"]');

    function validatePasswords() {
        if (newPassword.value && confirmPassword.value) {
            if (newPassword.value !== confirmPassword.value) {
                confirmPassword.setCustomValidity('两次输入的密码不匹配');
            } else {
                confirmPassword.setCustomValidity('');
            }
        }
    }

    newPassword.addEventListener('input', validatePasswords);
    confirmPassword.addEventListener('input', validatePasswords);

    // 表单提交前验证
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        if (newPassword.value && !confirmPassword.value) {
            e.preventDefault();
            alert('请确认新密码');
            confirmPassword.focus();
        }
    });
});
</script>
{% endblock %}